<template>
    <div class="SignIn">
      <van-nav-bar
        title="面经注册"
      />
        
      <van-field v-model.trim="username" name="validator" label="用户名" placeholder="请输入用户名" :rules="[{ validator, message: '请输入正确内容' }]"/>
      <van-field v-model.trim="password" name="validator" label="密码" placeholder="请输入密码" :rules="[{ validator, message: '请输入正确内容' }]"/>
    
      <div style="margin: 16px;">
        <van-button type="primary"  block @click="onSubmit" >注册</van-button>
      </div>

      <div class="zhuce">
        <router-link to="/login">有账号，去登陆</router-link>
      </div>
    </div>
  </template>

<script>
import axios from 'axios';
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
    name: 'SignIn',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        onSubmit() {

          if(this.username ===''){
            Toast.fail('请输入账号');
            return
          }

          if(this.password ===''){
            Toast.fail('请输入密码');
            return
          }

          if(this.username.length <6 || this.password.length <6 ){
            Toast.fail('账号或密码长度不够');
            return
          }
          axios.post('http://interview-api-t.itheima.net/h5/user/register',{username:this.username,password:this.password}).then(res => {
              console.log(res);
              this.$router.push('/login')
            }).catch(err => {
                console.log(err);
                alert('注册失败')
            })
        },
        validator(value){
          return value.length >=6;
        },
    }
}
</script>

<style long="less" scoped>
    .zhuce{
          text-align: right;
        padding-right: 30px;
        }
</style>